<script lang="ts" setup>
import { computed, onMounted, onUnmounted, onUpdated, ref } from 'vue'
import MarkdownIt from 'markdown-it'
import MdKatex from '@vscode/markdown-it-katex'
import MdLinkAttributes from 'markdown-it-link-attributes'
import MdMermaid from 'mermaid-it-markdown'
import hljs from 'highlight.js'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { t } from '@/locales'
import { copyToClip } from '@/utils/copy'
import { recommendPage } from '@/api'
interface Props {
  inversion?: boolean
  error?: boolean
  text?: string
  loading?: boolean
  asRawText?: boolean
}

const props = defineProps<Props>()

//typeScript定义入参结构体
 /**
   * ev 事件名
   * text 事件参数
   */
interface Emit {
  (ev: 'pushResult', text: string): void
}
const emit = defineEmits<Emit>()


//tips列表数据
const blockList = ref<Array<any>>([
//   {
//   id:1,
//   label:'生成一篇2024年1月空气环境质量报告',
// },{
//   id:2,
//   label:'生成一篇2024年2月空气环境质量报告',
// },{
//   id:3,
//   label:'生成一篇2024年3月空气环境质量报告',
// },
]) // 使用 any 类型作为占位符



const data = ref<Array<any>>([])
function pushResult(text:string){
  emit('pushResult',text)

}

onMounted(async ()=>{
 await  recommendPage().then(res=>{
  console.log('[ res ] >', res)
  blockList.value = res.data.records.map((r,index)=>{
    return {
      label: r.recommendContent,
      id:index
    }
  })
 })

})
</script>

<template>
  <div class="text-black" >
    <div class="text-title">
      试一试
    </div>
    <div class="text-list">
      <div class="text-list-item" @click="pushResult(item.label)" v-for="(item,index) in blockList" :key="index">{{item.label}}</div>
    </div>
  </div>
</template>

<style lang="less"> 
.text-black{
    .text-title{
      color: rgba(27, 86, 255, 1);
      cursor: pointer;
    }
    .text-list{
      display: flex;
      flex-direction: column;
      row-gap: 20px;
      .text-list-item{
        cursor: pointer;
        border-radius: 10px;
        padding: 10px 20px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        font-size: 14px;
        color: rgba(51, 51, 51, 1);
      }
    }
}
</style>
